<template>
    <div class="order">
        <el-table :data="tableData" stripe style="width: 100%" height="500">
            <el-table-column prop="scriptWritingTitle" fixed label="购买记录" width="100"/>
            <el-table-column prop="tradeId" label="交易ID" width="150">
                <template #default="scope">
                    <span class="spanColor">{{strTrans(scope.row.tradeId)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="buyerID" label="买/卖方ID" width="150">
                <template #default="scope">
                    <span class="spanColor">{{strTrans(scope.row.tradeId)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="时间戳" width="200"/>
            <el-table-column prop="price" label="金额">
                <template #default="scope">
                    <span>{{ scope.row.price == null ? '免费' : scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="tradeState" label="状态">
                <template #default="scope">
                    <span>{{tradeState(scope.row.tradeState)}}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="我的操作"  fixed="right">
              <template #default="scope">
                  <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                  >
              </template>
            </el-table-column> -->
        </el-table>
        <div style="text-align:right;margin-top:20px">
            <el-pagination
                    background
                    v-model:currentPage="currentPage1"
                    :page-sizes="[10, 15, 20, 25, 30]"
                    :page-size="pageSize"
                    layout="total,  prev, pager, next, sizes, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {TradeInfoList} from "@/api/TradeInfo"

    export default {
        strTrans(d) {
            return d.substring(0, 6) + '...' + d.substring(d.length - 5, d.length - 1)
        },
        data() {
            return {
                currentPage1: 1,
                tableData: [],
                total: 0,
                pageSize: 15,
                scanType: 2,//1：订单 2：交易
            };
        },
        created() {
            this.getList()
        },
        methods: {
            tradeState(state) {
                switch (state) {
                    case 1:
                        return '待付款'
                        break;
                    case 2:
                        return '已支付'
                        break;
                    case 3:
                        return '充值'
                        break;
                    case 4:
                        return '提现'
                        break;
                    default:
                        break;
                }
            },
            strTrans(d) {
                if (d == undefined) {
                    return ''
                } else {
                    return d.substring(0, 6) + '...' + d.substring(d.length - 5, d.length - 1)
                }

            },
            getList() {
                TradeInfoList({scanType: 2}).then((res) => {
                    this.tableData = res.data.list
                    console.log("数据为", this.tableData)
                    this.total = res.data.total
                })
            },
            handleDelete() {
            },
            handleSizeChange() {
            },
            handleCurrentChange() {
            },
        },
    };
</script>
<style lang="scss" scoped>
    .spanColor {
        color: #2EB0C6;
    }
</style>
